import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  TextInput,
} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Fontisto from "react-native-vector-icons/Fontisto";
import {Constant, StylesConstant} from "../Constant";

export default class XunchaItem extends React.Component {
  constructor(props) {
    super(props);
    const {dataList} = this.props;
    const list = dataList.map(item=>{
      return {
        ...item,
        checkItemId: item.id,
        isIllegal: 0,
      }
    })
    this.state = {
      inspectionItems: list,
      // {isIllegal: 1/0}
    };
    this.props.dataChange && this.props.dataChange(list)
  }
  render() {
    const {
        label,
        onClick,
        hideIcon,
        iconFont,
        iconSize,
        labelWidth,
        readonly,

    } = this.props;
    return (
      <View style={styles.item}>
        <View style={{marginBottom: 10}}>
          <Text
              style={[
                styles.label,
              ]}>
            {label}
          </Text>
        </View>
        <View style={{
          flex: 1,
          backgroundColor: 'rgba(168,195,255,0.11)',
          borderWidth: 1,
          borderColor: '#a8c3ff'
        }}>
          <View style={styles.content}>
            {this._renderDataRow()}
          </View>
        </View>
      </View>
    );
  }
    changeCheck(index,val){
        let list=this.state.inspectionItems
        list[index].isIllegal = val
        this.setState({
            inspectionItems:list
        })
        console.log("inspectionItems",this.state.inspectionItems[index])
        this.props.dataChange && this.props.dataChange(this.state.inspectionItems)
    }
  _renderDataRow(){
    const {inspectionItems} = this.state
    // console.log(inspectionItems)
    // [{"caseRelatedIndustries": 1,
    // "checkTypeId": 1, "id": 8, "inspectionFrequency": "日常", "inspectionMethod": "巡查方式", "itemCode": "001",
    // "name": "测试", "sortNumber": 1, "specialEvent": "专项活动2"},
    // {"caseRelatedIndustries": 1, "checkType": {"caseRelatedIndustries": 1, "checkCode": "002", "id": 2, "name": "测试2", "sortNumber": 2}, "checkTypeId": 2, "id": 9, "inspectionFrequency": "日常", "inspectionMethod": "", "itemCode": "002", "name": "测试2", "sortNumber": 2, "specialEvent": ""}]
    const view = []
    inspectionItems.map((item,index)=>{
      const {name, isIllegal} = item
      view.push(
          <View key={index} style={{flexDirection: 'row',alignItems: 'center',justifyContent: 'space-between',padding: 5}}>
            <Text style={styles.radioLabel}>{name}</Text>
            <TouchableOpacity
                style={styles.radioItem}
                activeOpacity={0.5}
                key={index+'_yes'}
                onPress={() => this.changeCheck(index,1)}>
              <Fontisto
                  style={styles.checkIcon}
                  name={
                    isIllegal === 1
                        ?  'radio-btn-active'
                        :  'radio-btn-passive'
                  }
                  size={14}
                  color={StylesConstant.themeIconColor}
              />
              <Text style={styles.iconlabel}>违反</Text>
            </TouchableOpacity>
            <TouchableOpacity
                style={styles.radioItem}
                activeOpacity={0.5}
                key={index+'_no'}
                onPress={() => this.changeCheck(index, 0)}>
              <Fontisto
                  style={styles.checkIcon}
                  name={
                    isIllegal === 0
                        ?  'radio-btn-active'
                        :  'radio-btn-passive'
                  }
                  size={14}
                  color={StylesConstant.themeIconColor}
              />
              <Text style={styles.iconlabel}>未违反</Text>
            </TouchableOpacity>
          </View>
      )
    })
    return view
  }
  renderInput() {
    const {
      placeholder,
      value,
      textPaddingLeft,
      type,
      multiline,
      onClick,
      numberOfLines,
      readonly
    } = this.props;
    let height = 25;
    if (multiline) {
      height = 25 * numberOfLines;
    }
    // const {textInput} = this.state;
    this.state.textInput = value;
    if (type && type == 'input') {
      return (
        <TextInput
          value={value}
          placeholder={placeholder}
          multiline={multiline}
          numberOfLines={numberOfLines}
          readonly={readonly}
          onChangeText={(text) => {
            this.props.onchange(text);
            this.setState({textInput: text});
          }}
          style={[
            {
              width: 200,
              height: height,
              fontSize: 17,
              paddingTop: 0,
              paddingBottom: 0,
            },
            textPaddingLeft ? {marginLeft: textPaddingLeft} : {marginLeft: 5},
          ]}
        />
      );
    } else {
      if (value) {
        return (
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => (onClick != undefined ? onClick() : null)}>
            <Text
              style={[
                styles.value,
                textPaddingLeft
                  ? {paddingLeft: textPaddingLeft}
                  : {paddingLeft: 5},
              ]}>
              {value}
            </Text>
          </TouchableOpacity>
        );
      } else {
        return (
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => (onClick != undefined ? onClick() : null)}>
            <Text
              style={[
                styles.placeholder,
                textPaddingLeft
                  ? {paddingLeft: textPaddingLeft}
                  : {paddingLeft: 5},
              ]}>
              {placeholder}
            </Text>
          </TouchableOpacity>
        );
      }
    }
  }
}
const styles = StyleSheet.create({
    radioLabel:{
      flex: 1,
      fontSize:12
    },
    radioItem:{
        width: 70,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    checkIcon:{
      marginRight: 2
    },
    iconlabel:{
      fontSize: 12
    },
  item: {
    marginLeft: 15,
    borderBottomWidth: 0.5,
    borderBottomColor: '#e1e1e1',
    paddingTop: 14,
    paddingBottom: 13,
  },
  content: {
    justifyContent: 'space-between',
    paddingRight: 14,
  },
  label: {
    fontSize: 14,
  },
  inputStyle: {},
  value: {
    fontSize: 17,
    color: '#000',
    marginTop: 0,
  },
  placeholder: {
    fontSize: 17,
    color: '#a6a6a6',
  },
});
